<template>
    <div class="sea-page box">
        <div class="flex-box">
            <div class="flex-header">
                <h4>Direct Chat</h4>
                <span>聊天框</span>
            </div>
            <div class="flex-body flex-column-gap scroll">
                <div class="flex-row">
                    <div class="flex-left">
                        <sea-image-icon text="Admin" class="img-circle bg-primary margin" size="48"
                                        font-size="20px;"></sea-image-icon>
                    </div>
                    <div class="flex-body">
                        <div class="text-regular margin-left">2025-01-01 11:11:11</div>
                        <div class="small-card box-primary arrow-left">
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                        </div>
                    </div>
                </div>

                <div class="flex-row">
                    <div class="flex-body">
                        <div class="text-regular margin-left">2025-01-01 11:11:11</div>
                        <div class="small-card box-danger arrow-right">
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                        </div>
                    </div>
                    <div class="flex-right">
                        <sea-image-icon text="Admin" class="img-circle bg-primary margin" size="48"
                                        font-size="20px;"></sea-image-icon>
                    </div>
                </div>

                <div class="flex-row">
                    <div class="flex-left">
                        <sea-image-icon text="Admin" class="img-circle bg-primary margin" size="48"
                                        font-size="20px;"></sea-image-icon>
                    </div>
                    <div class="flex-body">
                        <div class="text-regular margin-left">2025-01-01 11:11:11</div>
                        <div class="small-card box-success arrow-left">
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                            <span class="block">12312312312</span>
                        </div>
                    </div>
                </div>

            </div>
            <div class="flex-footer">
                <el-input>
                    <template #append>
                        <i class="fa fa-fw fa-search"></i>
                    </template>
                </el-input>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
</script>
